<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <!-- <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render v-if="column.render" :render="column.render" :row="scope.row" :column="column" />
            <span v-else>{{ scope.row[column.key] || '-' }}</span>
          </template>
        </el-table-column> -->
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate } from '@neu/biz-core/utils/utils'
import { page } from '@neu/dcam-ui/api/noticeRecord'
export default {
  name: 'NoticeRecord',
  components: {
    TableFilter,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: page,
      insideColumns: [
        { title: '发送时间', key: 'createTime', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.createTime)) }, display: true },
        { title: '发起应用', key: 'appCode' },
        { title: '主题', key: 'title' },
        { title: '通知类型', key: 'type', render: (h, params) => { return h('span', JSON.stringify(params.row.type)) }, display: true },
        { title: '邮件', key: 'mail', render: (h, params) => { return h('span', JSON.stringify(params.row.mail)) }, display: true },
        { title: '系统通知', key: 'system', render: (h, params) => { return h('span', JSON.stringify(params.row.system)) }, display: true }
      ],
      dialogFormVisible: false,
      editId: -1
    }
  },
  methods: {
    // 表格编辑按钮点击事件处理
    edit(id) {
      // 打开对话框
      this.editId = id
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
    },
    // 编辑资产对话框确认事件处理
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
        this.$refs.editForm.reset()
      })
    },
    cancel() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    }
  }
}
</script>
